<!-- OrderDetail.vue -->
<template>
	<div class="order-detail">
		<!-- 收货地址 -->
		<div class="address-section">
			<div class="address-icon">
				<uni-icons type="location" size="20" color="#333"></uni-icons>
			</div>
			<div class="address-info">
				<div class="address-title">
					{{ order.address.title }}
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</div>
				<div class="address-name">{{ order.address.name }} {{ order.address.phone }}</div>
			</div>
		</div>

		<!-- 订单信息 -->
		<div class="order-info">
			<div class="store-name">{{ order.storeName }}</div>
			<div class="delivery-time">{{ order.deliveryTime }}</div>
		</div>

		<!-- 商品信息 -->
		<div class="product-info">
			<img class="product-image" :src="order.product.image" alt="product image">
			<div class="product-details">
				<div class="product-name">{{ order.product.name }}</div>
				<div class="product-spec">{{ order.product.spec }}</div>
				<div class="product-price">
					<span class="price">￥{{ order.product.price.toFixed(2) }}</span>
					<span class="quantity">x{{ order.product.quantity }}</span>
				</div>
			</div>
		</div>

		<!-- 价格摘要 -->
		<div class="price-summary">
			<div class="summary-item">
				<span>商品总价</span>
				<span class="price">￥{{ order.totalPrice.toFixed(2) }}</span>
			</div>
			<div class="summary-item">
				<span>配送费</span>
				<span class="price">￥{{ order.deliveryFee.toFixed(2) }}</span>
			</div>
			<div class="summary-item total">
				<span>合计</span>
				<span class="price">￥{{ (order.totalPrice + order.deliveryFee).toFixed(2) }}</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'OrderDetail',
		props: {
			order: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				orderData: {
					address: {
						title: '厦门集美区岩沧街道',
						name: '厦门理工学院充电桩室',
						phone: 'xxx 153xxxx6247'
					},
					storeName: '沛可思宠物店（虹悦城店）',
					deliveryTime: '9月10日(周日) 09:00-12:00',
					product: {
						image: '/static/product.jpg',
						name: '测试猫粮',
						spec: '通用型 6个月',
						price: 5999.00,
						quantity: 1
					},
					totalPrice: 5999.00,
					deliveryFee: 0.00
				}
			}
		}
	}
</script>

<style scoped>
	.order-detail {
		background-color: #f8f8f8;
		padding: 20rpx;
	}

	.order-page {
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.address-section {
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		align-items: center;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.address-icon {
		margin-right: 20rpx;
	}

	.address-info {
		flex: 1;
	}

	.address-title {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.address-name {
		font-size: 24rpx;
		color: #666;
	}

	.order-info {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.store-name {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.delivery-time {
		font-size: 24rpx;
		color: #666;
	}

	.product-info {
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.product-image {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
	}

	.product-details {
		flex: 1;
	}

	.product-name {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.product-spec {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.product-price {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.price {
		font-size: 28rpx;
		color: #ff6b6b;
	}

	.quantity {
		font-size: 24rpx;
		color: #666;
	}

	.price-summary {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.summary-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
		font-size: 26rpx;
	}

	.total {
		border-top: 1rpx solid #eee;
		padding-top: 10rpx;
		margin-top: 10rpx;
		font-weight: bold;
	}
</style>